<#include "../../common/header.htm">
<div class="content-wrapper">
	<section class="content" id="special_addrDialog" style="display: flex;">
		<form  method="post" class="form-horizontal" style="width: 500px;">
			<div class="form-group">
				<label class="col-sm-3 control-label">地点名称：</label>
				<div class="col-sm-8 casexiaqu">
					<input v-model="addrName"  class="form-control easyui-validatebox"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">案件对象：</label>
				<div class="col-sm-8 casexiaqu">
					<el-select v-model="personInformationId" :filter-method="remoteMethod" filterable placeholder="请选择">
						<el-option
								v-for="item in caseObjectList"
								:key="item.pid"
								:label="item.personName"
								:value="item.pid">
							<span style="float: left">{{ item.personName }}</span>
							<span style="float: right; color: #8492a6; font-size: 13px">{{ item.idNumber }}</span>
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">地点含义：</label>
				<div class="col-sm-8 casexiaqu">
					<input v-model="addrMean"  class="form-control easyui-validatebox"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">地点范围：</label>
				<div class="col-sm-8 casexiaqu">
					<input v-model="addrRange" style="display: inline-block"  class="form-control easyui-validatebox"/> &nbsp;米
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">地址：</label>
				<div class="col-sm-8 casexiaqu">
					<input v-model="address"  class="form-control easyui-validatebox"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">经度：</label>
				<div class="col-sm-8 casexiaqu">
					<input v-model="jd"  class="form-control easyui-validatebox"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">维度：</label>
				<div class="col-sm-8 casexiaqu">
					<input v-model="wd"  class="form-control easyui-validatebox"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">启用状态：</label>
				<div class="col-sm-8">
					<input v-model="status"  type="radio"  value="1"><span class="casetypespan">启用</span>
					<input v-model="status"  type="radio"  value="0"><span class="casetypespan">不启用</span>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">备注：</label>
				<div class="col-sm-8">
					<textarea  v-model="remark" style="width: 400px;height: 100px;" data-options="validType:['length[1,1000]']"></textarea>
				</div>
			</div>
			<div class="form-group bill-buttonarea"  style="text-align: center;">
				<input type="button" class="btn btn-primary" @click="onSubmit" value="提交" />
			</div>
		</form>
        <div id="map" style="width: 560px;height: 400px">

        </div>
	</section>
</div>
<!--判断是否联网-->
<script src="${ctx}/bower_components/vue/common/onLineUtil.js"></script>
<#if Session["env"]?exists && Session["env"] = 'Intranet'>
<link rel="stylesheet" type="text/css" href="${ctx}/bower_components/map2.0/css/baidu_map_v2.css"/>
<script src="${ctx}/bower_components/map2.0/baidumap_offline_v2_load.js"></script>
<#else>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=T72A6h5INhfXpKA5ZBsrDcj3fbQpeaWs"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
</#if>
<script>
	$(function () {
		var data=top.dialog.get(window).data
		var id=data.id;
		if (id){
			$.ajax({
				url:"${ctx}/special_addr/findOneById",
				type: "post",
				data: {
					id:id,
				},
				dataType: "json",
				success: function (msg) {
					if (msg.flag) {
						var obj=msg.data;
						vm.addrName=obj.addrName
						vm.addrMean=obj.addrMean
						vm.status=obj.status
						vm.addrRange=obj.addrRange
						vm.address=obj.address,
						vm.remark=obj.remark,
						vm.jd=obj.jd,
						vm.wd=obj.wd,
						vm.id=obj.id,
						vm.personInformationName=obj.personInformationName,
						vm.personInformationId=obj.personInformationId,
                        initMap2("map",{"jd":obj.jd,"wd":obj.wd},setJWD)
					}
				},

			})
		}else{
            //初始化地图
            initMap2("map",{},setJWD)
        }
	})
	var vm=new Vue({
		el:"#special_addrDialog",
		data:{
			personInformationId:'',
			personInformationName:'',
			caseObjectList:[],
			caseObjectList2:[],
			addrName:"",
			addrMean:"",
			addrRange:"",
			address:"",
			jd:"",
			wd:"",
			remark:"",
			status:"1"
		},
		created:function () {
			this.getCaseObjectList()
		},
		methods:{
			onSubmit(){
				for (let i = 0; i < this.caseObjectList2.length; i++) {
					let item=this.caseObjectList2[i];
					if(item.pid === this.personInformationId){
						this.personInformationName=item.personName
					}
				}
				$.ajax({
					url:"${ctx}/special_addr/save",
					type: "post",
					data: {
						addrName:this.addrName,
						addrMean:this.addrMean,
						addrRange:this.addrRange,
						address:this.address,
						remark:this.remark,
						status:this.status,
						jd:this.jd,
						wd:this.wd,
						id:this.id,
						personInformationId:this.personInformationId,
						personInformationName:this.personInformationName
					},
					dataType: "json",
					success: function (msg) {
						if (msg.flag) {
							if (vm.id){
								vm.$message('修改成功');
							} else{
								vm.$message('新增成功');
							}
						}
					},

				})
			},
			remoteMethod(query) {
				if (query) {
					let arr=[]
					this.caseObjectList2.filter(function(currentValue, index){
						let personName=currentValue.personName;
						let idNumber=currentValue.idNumber;
						if (personName.indexOf(query)!=-1 || idNumber.indexOf(query)!=-1) {
							arr.push(currentValue);
						}
					})
					this.caseObjectList = arr;
				} else {
					this.caseObjectList = this.caseObjectList2;
				}
			},
			getCaseObjectList(keyword){
				$.ajax({
					url:"${ctx}/person_info/queryPersonInfoByNameOrIdNumber",
					type: "post",
					data: {
						keyword:keyword,
					},
					dataType: "json",
					success: function (msg) {
						if (msg.flag) {
							vm.caseObjectList=msg.data;
							vm.caseObjectList2=msg.data;
						}
					},

				})
			}
		}
	})

    //设置经纬度
    function setJWD(jd,wd) {
	    vm.jd=jd;
	    vm.wd=wd;
    }
</script>
<style>
	.bill-buttonarea .btn{
		background: #4595ec;
		border-color: transparent;
	}
	.bill-buttonarea .btn:hover{
		background: #3296f1;
	}
	.btn-primary:active:focus{
		background: #0c76d7;
	}
	.casetypespan{
		cursor: pointer;
	}
	#caseRemark{
		border-radius: 4px;
		border: solid 1px #d9d9d9;

	}
	sapn.caseperfen {
		margin-left: 25px;
		height: 34px;
		line-height: 34px;
	}
	.col-sm-8{
		padding-left: 0;
	}
	.col-sm-6{
		padding-left: 0;
	}
	#personName{
		width: 527px;
		height: 34px;
		background-color: #ffffff;
		border-radius: 4px;
		border: solid 1px #d9d9d9;
	}
	input#caseAuthority{
		margin-right: 6px;
	}
	input#casePerson {
		margin-right: 6px;
	}
	span.casetypespan {
		margin-right: 35px;
	}
	input#caseType {
		margin-right: 6px;
	}
	.casetypec{
		margin-top: 5px;
	}
	.form-group {
		margin-bottom: 25px;
	}
	span.casestar {
		color: red;
		font-size: 18px;
		position: absolute;
		right: 86px;
		top: 8px;
		font-weight: 900;
	}
	label.col-sm-3.control-label {
		font-weight: normal;
		color: #000;
	}
	.box-body {
		margin-top: 30px;
	}
	.box-body.table-responsive {
		height: 100%;
	}
	.fixed-table-pagination {
		margin-top: 15px;
	}
	.form-control {
		width: 200px;
		height: 34px;
		line-height: 25px;
		background: #fff;
		border-color: #d9d9d9;
		border-radius: 4px;
	}
	#special_addrDialog input.el-input__inner{
		width: 323px;
		height: 36px;
	}
	.el-select-dropdown__wrap.el-scrollbar__wrap{
		overflow: hidden !important;
	}
	.el-select-dropdown__item selected hover , .el-select-dropdown__item.selected{
		background-color:#e4e8f1 !important;
		color:#48576a;
	}
</style>